<template>
    <div class="phone-number-container">
        <el-input
            v-model="inputValue"
            class="input-with-select"
            maxlength="11"
            placeholder="点击验证手机号" readonly @click.native="openDialogHandle"
        >
            <i slot="prefix" class="el-input__icon el-icon-mobile" />
            <el-button slot="append" icon="el-icon-message" @click="openDialogHandle" />
        </el-input>
        <van-popup v-model="open" position="bottom" round style="padding: 20px">
            <el-form ref="form" :model="phoneValidateForm" :rules="rules">
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="phoneValidateForm.phoneNumber" class="input" maxlength="11" prefix-icon=" el-icon-mobile "
                              show-word-limit
                    />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="phoneValidateForm.code" class="input" prefix-icon="el-icon-message">
                        <el-button
                            slot="append"
                            :disabled="phoneValidateCodeBtn"
                            type="primary"
                            @click="sendValidateMsgHandle"
                        >
                            {{ phoneValidateCodeBtnText }}
                        </el-button>
                    </el-input>
                </el-form-item>
                <el-form-item class="text-center" style="margin-top: 40px">
                    <el-button @click="open = false">
                        取 消
                    </el-button>
                    <el-button type="primary" @click="validateCodeHandle">
                        确 定
                    </el-button>
                </el-form-item>
            </el-form>
        </van-popup>
    </div>
</template>

<script>
import { Popup } from 'vant'
import 'vant/lib/popup/style'
import mixin from './mixin'

export default {
    name: 'MobilePhoneVerification',
    components: {
        [Popup.name]: Popup
    },
    mixins: [mixin]
}
</script>
<style lang="scss" scoped>
</style>
